import React, { FC, ReactElement, useState, useEffect } from 'react';
import { Form, Input, Cascader } from 'antd';
import { InfoCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { getQueryAddress } from '@/services';

const StepOne: FC = (): ReactElement => {
  const [options, setOptions] = useState([]); // 级联选择框数据

  // 获取地区列表
  const getAreaList = () => {
    getQueryAddress({ addressLevel: 1 }).then((res) => {
      if (res.code === 200) {
        setOptions(
          res.data.map((item: any) => ({
            value: item.addressCode,
            label: item.addressName,
            isLeaf: false,
          })),
        );
      }
    });
  };
  // 选取地区时加载二级地区
  const loadData = (selectedOptions: any) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    setTimeout(() => {
      getQueryAddress({
        addressLevel: 2,
        parentId: selectedOptions[0].value,
      }).then((res) => {
        if (res.code === 200) {
          targetOption.loading = false;
          targetOption.children = res.data.map((item: any) => ({
            value: item.addressCode,
            label: item.addressName,
          }));
          setOptions([...options]);
        }
      });
    }, 1000);
  };

  useEffect(() => {
    getAreaList();
  }, []);
  return (
    <div>
      <Form.Item
        label="项目编号"
        name="projectNo"
        tooltip={{
          title: '请输入项目唯一标识符',
          icon: <InfoCircleOutlined />,
        }}
        rules={[{ required: true }]}
      >
        <Input placeholder="请输入编号" />
      </Form.Item>
      <Form.Item
        label="项目名称"
        name="projectName"
        rules={[{ required: true }]}
      >
        <Input placeholder="请输入名称" />
      </Form.Item>
      <Form.Item name="Area" label="地区选择" rules={[{ required: true }]}>
        <Cascader
          placeholder="请选择项目所在地区"
          dropdownClassName="CascaderDropdown_Diy"
          options={options}
          loadData={loadData}
          onChange={(value, selectedOptions) => {}}
          changeOnSelect
        />
      </Form.Item>
      <Form.Item
        label="项目地址"
        name="projectAddress"
        rules={[{ required: true }]}
      >
        <Input prefix={<EnvironmentOutlined />} placeholder="请输入地址" />
      </Form.Item>
    </div>
  );
};
export default StepOne;
